<template>
	<div class="login">
		<div class="header">
			<div class="header-center fl">
				<div class="header-title">
					登录页面
				</div>
				<div class="header-img"></div>
			</div>
			<div class="header-bottom fl"></div>
		</div>
		<div class="content">
			<div class="content-left">
			</div>
			<div class="content-right">
				<div class="right-infp">
					<div class="right-infp-name">
						<input type="phone" v-model="phone" placeholder="请输入账号" maxlength="12">
					</div>
					<div class="right-infp-name">
						<input type="password" v-model="password" placeholder="请输入密码">
					</div>
					<div class="right-infp-btn">
						<button class="btn" @click="submit">登录</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'
	import {
		ElMessage
	} from 'element-plus'
	let phone = ref(null),
		password = ref(null),
		router = useRouter()
	let submit = () => {
		if (!phone.value) {
			ElMessage({
				message: '账号不能为空',
				type: 'warning'
			})
			return true
		} else if (!password.value) {
			ElMessage({
				message: '密码不能为空',
				type: 'warning'
			})
			return true
		}
		router.push('/home')
	}
</script>
<style lang="scss" scoped>
	.login {
		background: url("../../assets/image/login/bj.jpg") no-repeat;
		background-size: cover;
		color: #ffffff;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		/*头部*/
		.header {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100px;
		}

		.header .header-center {
			width: 50%;
			position: relative;
			margin: 0 auto;
		}

		.header .header-center .header-title {
			text-align: center;
			color: #ffffff;
			font-size: 27px;
			text-shadow: 0 0 50px #00d8ff;
		}

		.header .header-img {
			background: url("../../assets/image/login/head.gif") no-repeat center center;
			background-size: 100%;
			height: 100%;
			width: 100%;
			position: absolute;
			top: 50px;
		}

		.content {
			width: 800px;
			height: 466px;
			margin: 90px auto 0 auto;
		}

		.content .content-left {
			width: 413px;
			height: 386px;
			background: url("../../assets/image/login/d.png") no-repeat;
			background-size: 100% 100%;

			box-sizing: border-box;
			margin-right: 2%;
			float: left;
		}
		.content .content-left {
			-webkit-transform: rotate(360deg);
			animation: rotation 15s linear infinite;
			-moz-animation: rotation 15s linear infinite;
			-webkit-animation: rotation 15s linear infinite;
			-o-animation: rotation 15s linear infinite;
		}

		.content .content-right {
			width: 360px;
			height: 386px;
			background: url("../../assets/image/login/e.png") no-repeat;
			background-size: 100% 100%;
			float: right;
			position: relative;

		}

		.right-infp {
			width: 264px;
			height: 198px;
			margin: auto auto;
			/* border: 1px solid red;*/
			vertical-align: center;
			position: absolute;
			top: 105px;
			left: 66px;
		}

		.right-infp-name {
			background: url("../../assets/image/login/b.png") no-repeat;
			width: 100%;
			height: 33px;
			background-size: 100% 100%;
			line-height: 33px;
			margin-bottom: 30px;
			position: relative;
		}

		.right-infp-name input {
			position: absolute;
			left: 0;
			width: 85%;
			border: none;
			box-sizing: border-box;
			height: 33px;
			margin-left: 33px;
			line-height: 30px;
			background: none !important;
			color: #00eaff;
			padding-left: 10px;
			/*box-shadow: 0 0 1px #00eaff;*/
			outline: none;
			-webkit-tap-highlight-color: rgba(255, 0, 0, 0);
		}

		input::-webkit-input-placeholder {
			color: #ccc;
		}

		.right-infp-btn {
			background: url("../../assets/image/login/a.png") no-repeat;
			width: 100%;
			height: 33px;
			background-size: 100% 100%;
			line-height: 33px;
			margin-bottom: 30px;
			position: relative;
		}

		.right-infp-btn .btn {
			width: 95%;
			border: none;
			box-sizing: border-box;
			height: 29px;
			margin-left: 6px;
			font-size: 14px;
			cursor: pointer;
			background: none;
			outline: none;
			color: black;
			position: absolute;
			left: 0;
			transition: all .3s;
		}

		.right-infp-btn .btn:hover {
			color: white;
		}
	}
</style>
